<template>
  <header class="sticky top-0 z-50" :class="headerClass">
    <nav class="border-gray-200 dark:border-b dark:border-gray-800 dark:bg-[#212936]">
      <div class="max-w-screen-2xl flex flex-wrap items-center justify-between mx-auto p-4 h-16">
        
        <div class="flex items-center">

            <!-- 移动端知识库目录图标 -->
            <div class="inline-block lg:hidden mr-3">
                <input type="checkbox" id="checkbox" v-model="isDrawerExpand">
                <label for="checkbox" class="toggle">
                    <div class="bars" id="bar1"></div>
                    <div class="bars" id="bar2"></div>
                    <div class="bars" id="bar3"></div>
                </label>
            </div>

            <!-- header左侧logo和博客名 -->
            <a href="/" class="flex items-center hand-style">
              <img :src="blogSettingsStore.blogsettingInfo.logo" class="rounded-full h-8 mr-3" alt="码海航行 Logo" />
              <!-- <span class="self-center text-2xl text-sky-300 font-semibold whitespace-nowrap dark:text-white">{{ blogSettingsStore.blogsettingInfo.name }}</span> -->
            </a>
        </div>
      
        <!-- header右侧  -->
        <div class="flex md:order-2 relative">
          <ChangeTheme class=" absolute -top-6 -left-36"></ChangeTheme>
          <!-- 移动端搜索放大镜 -->
          <button type="button" @click="clickSearchBtn" aria-expanded="false" class="md:hidden text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 mr-1">
              <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
                  viewBox="0 0 20 20">
                  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z" />
              </svg>
              <span class="sr-only">Search</span>
          </button>
          <!-- PC端搜索框 -->
          <button type="button" @click="clickSearchBtn"
            class="mr-10 hidden outline-none md:flex items-center text-sm leading-6 text-slate-400 rounded-md ring-1 ring-slate-900/10 shadow-sm py-1.5 pl-2 pr-3 hover:ring-slate-300 dark:bg-slate-800 dark:hover:bg-slate-700 dark:hover:ring-slate-700">
            <svg class="w-3.5 h-3.5 mr-2 text-gray-500 dark:text-gray-400" aria-hidden="true"
              xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
              <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z" />
            </svg>
            <span class="mr-3">搜索文章 ...</span>
            <span class="px-2 py-[1px] flex-none text-xs border text-gray-400 rounded dark:border-gray-600">Ctrl K</span>
          </button>

          <!-- 未登录的话，展示登录按钮 -->
          <div v-if="!userStore.userInfo.avatar"
            class="flex items-center justify-center text-gray-900 hover:text-blue-700 mr-1 ml-1 dark:text-white"
            @click="$router.push('/login')">登录</div>

          <!-- 已经登录的话，展示用户头像 -->
          <button v-else id="dropdownDefaultButton" data-dropdown-toggle="dropdown"
            class="hand-style text-white ml-2 mr-2 md:mr-0 focus:ring-4 focus:ring-blue-300 font-medium rounded-full text-sm text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
            type="button">
            <img class="h-8 w-8 rounded-full"
              :src="userStore.userInfo.avatar ? userStore.userInfo.avatar : blogSettingsStore.blogsettingInfo.avatar"
              alt="">
          </button>
          <!-- Dropdown menu -->
          <div id="dropdown" class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow dark:bg-gray-700">
            <ul class="py-2 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownDefaultButton">
              <li>
                <a @click="formDialogRef.open()"
                  class="hand-style block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">
                  <svg t="1715497030260" class="inline w-4 h-4 mb-[2px] text-gray-800 dark:text-white" aria-hidden="true" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="4826" width="200" height="200">
                    <path
                      d="M780.659375 354.2375c0-175.3125-140.259375-315.609375-315.684375-315.609375S149.3375 178.915625 149.3375 354.2375c0 119.2125 63.121875 220.875 161.325 273.43125C173.740625 681.471875 74.440625 800.61875 47.646875 943.26875c-3.50625 17.540625 7.021875 38.596875 28.078125 42.103125h6.80625c17.559375 0 31.603125-10.528125 35.1-28.06875 30.99375-163.790625 174.459375-283.790625 343.753125-287.53125h7.021875c168.4125 0 312.215625-143.746875 312.215625-315.553125l0.0375 0.01875z m-561.24375 0c0-136.771875 108.740625-245.503125 245.559375-245.503125s245.55 108.73125 245.55 245.503125c0 133.209375-108.740625 241.921875-242.04375 245.4375h-10.528125c-133.303125-7.03125-238.5375-115.734375-238.5375-245.4375z m487.59375 315.54375c0 21.046875 14.04375 35.08125 35.1 35.08125H917.46875c21.05625 0 35.1-14.034375 35.1-35.08125 0-21.046875-14.04375-35.08125-35.1-35.08125H742.109375c-17.55 0-35.1 14.090625-35.1 35.08125zM917.46875 771.471875H636.884375c-21.05625 0-35.1 14.04375-35.1 35.090625s14.04375 35.08125 35.1 35.08125H917.46875c21.05625 0 35.1-14.034375 35.1-35.08125 0-21.046875-14.04375-35.090625-35.1-35.090625z m0 140.2875H640.390625c-21.065625 0-35.1 14.034375-35.1 35.090625s14.034375 35.00625 35.1 35.00625H917.46875c21.05625 0 35.1-14.04375 35.1-35.08125s-17.55-35.090625-35.1-35.090625v0.075z"
                      p-id="4827" fill="#374151" data-spm-anchor-id="a313x.search_index.0.i8.25d33a81DGatWQ" class="">
                    </path>
                  </svg>
                  个人资料</a>
              </li>
              <li v-if="userStore.userInfo.username == 'admin'">
                <a @click="router.push('/admin/index')"
                  class="hand-style block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">
                  <svg class="inline w-4 h-4 mb-[2px] text-gray-800 dark:text-white" aria-hidden="true"
                    xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="M12 15v5m-3 0h6M4 11h16M5 15h14a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1Z" />
                  </svg>
                  进入后台</a>
              </li>
              <li data-modal-target="popup-modal" data-modal-toggle="popup-modal">
                <a class="hand-style block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">
                  <svg class="inline w-4 h-4 mb-[2px] text-gray-700 dark:text-white" aria-hidden="true"
                    xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="M20 12H8m12 0-4 4m4-4-4-4M9 4H7a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h2" />
                  </svg>
                  退出登录</a>
              </li>
            </ul>
          </div>

          <button data-collapse-toggle="navbar-search" type="button"
            class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
            aria-controls="navbar-search" aria-expanded="false">
            <span class="sr-only">Open main menu</span>
            <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
              <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M1 1h15M1 7h15M1 13h15" />
            </svg>
          </button>

        </div>
        
        <!-- header 中间 -->
        <div class="items-center justify-between hidden w-full md:flex md:w-auto md:order-1" id="navbar-search">
          
          <!-- 移动端搜索框 -->
          <!-- <button type="button" @click="clickSearchBtn"
              class="relative mt-3 flex w-full md:hidden items-center text-sm leading-6 text-slate-400 rounded-md
                ring-1 ring-slate-900/10 shadow-sm py-1.5 pl-2 pr-3 hover:ring-slate-300 dark:bg-slate-800 
                dark:highlight-white/5 dark:hover:bg-slate-700 dark:hover:ring-slate-700">
              <svg class="w-3.5 h-3.5 mr-2 text-gray-500 dark:text-gray-400" aria-hidden="true"
                  xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
                  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z" />
              </svg>
              <span class="mr-3 grow text-left">搜索文章 ...</span>
              <span class="px-2 py-[1px] flex-none text-xs border text-gray-400 rounded dark:border-gray-600">Ctrl + K</span>
          </button> -->

          <ul class="flex flex-col p-4 md:p-0 mt-4 font-medium border border-gray-100 rounded-lg bg-gray-50 md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 dark:bg-gray-800 md:dark:bg-gray-800 dark:border-gray-700">
            <li>
              <a @click="router.push('/')" 
                :class="[currentPath == '/' ? 'text-sky-600 md:border-b-2 md:border-sky-600 dark:text-sky-500 dark:md:border-sky-600' : 'text-gray-900']"
                class="hand-style flex py-2 pl-3 rounded md:bg-transparent md:p-0 md:hover:text-blue-700 md:dark:text-blue-500"
                aria-current="page"><svg-icon class="mr-1" iconName="icon-shouye"></svg-icon>首页</a>
            </li>
            <li>
              <a @click="router.push('/category/list')"
                :class="[currentPath.startsWith('/category') ? 'text-sky-600 md:border-b-2 md:border-sky-600 dark:text-sky-500 dark:md:border-sky-600' : 'text-gray-900']"
                class="hand-style flex py-2 pl-3 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 md:dark:hover:text-blue-500 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">
                <svg-icon class="mr-1" iconName="icon-fenlei"></svg-icon>分类</a>
            </li>
            <li>
              <a @click="router.push('/tag/list')"
                :class="[currentPath.startsWith('/tag') ? 'text-sky-600 md:border-b-2 md:border-sky-600 dark:text-sky-500 dark:md:border-sky-600' : 'text-gray-900']"
                class="hand-style flex py-2 pl-3 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">
                <svg-icon class="mr-1" iconName="icon-biaoqian"></svg-icon>标签</a>
            </li>
            <li>
              <a @click="router.push('/archive/list')"
                :class="[currentPath.startsWith('/archive') ? 'text-sky-600 md:border-b-2 md:border-sky-600 dark:text-sky-500 dark:md:border-sky-600' : 'text-gray-900']"
                class="hand-style flex py-2 px-3 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">
                <svg-icon class="mr-1" iconName="icon-guidangchaxun_click"></svg-icon>归档</a>
            </li>
            <li>
              <a @click="router.push('/wiki/list')"
                  :class="[currentPath.startsWith('/wiki') ? 'text-sky-600 md:border-b-2 md:border-sky-600 dark:text-sky-500 dark:md:border-sky-600' : 'text-gray-900']"
                  class="hand-style flex py-2 pl-3 pr-4 rounded md:rounded-none hover:bg-gray-100 md:hover:bg-transparent md:hover:text-sky-600 md:p-0 md:dark:hover:text-sky-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">
                  <svg-icon class="mr-1" iconName="icon-zhishiku"></svg-icon>知识库</a>
            </li>
            <li>
              <a @click="router.push('/hot')" :class="[currentPath.startsWith('/hot') ? 'text-sky-600 md:border-b-2 md:border-sky-600 dark:text-sky-500 dark:md:border-sky-600' : 'text-gray-900']"
                class="hand-style flex py-2 px-3 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">
                <svg-icon class="mr-1" iconName="icon-resou"></svg-icon>热搜</a>
            </li>
          </ul>
        </div>
        
      </div>
    </nav>
    
  </header>
  <!-- 退出登录 -->
  <div id="popup-modal" tabindex="-1"
    class="fixed top-0 left-0 right-0 z-50 hidden p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[calc(100%-1rem)] max-h-full">
    <div class="relative w-full max-w-md max-h-full">
      <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
        <button type="button"
          class="absolute top-3 right-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ml-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white"
          data-modal-hide="popup-modal">
          <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
              d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
          </svg>
          <span class="sr-only">Close modal</span>
        </button>
        <div class="p-6 text-center">
          <svg class="mx-auto mb-4 text-gray-400 w-12 h-12 dark:text-gray-200" aria-hidden="true"
            xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
              d="M10 11V6m0 8h.01M19 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
          </svg>
          <h3 class="mb-5 text-lg font-normal text-gray-500 dark:text-gray-400">是否确定退出登录?
          </h3>
          <button @click="logout" data-modal-hide="popup-modal" type="button"
            class="text-white bg-red-600 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 dark:focus:ring-red-800 font-medium rounded-lg text-sm inline-flex items-center px-5 py-2.5 text-center mr-2">
            确定
          </button>
          <button data-modal-hide="popup-modal" type="button"
            class="text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-gray-200 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600">
            取消</button>
        </div>
      </div>
    </div>
  </div>
  <!-- 站内搜索 -->
  <div id="search-modal" tabindex="-1" aria-hidden="true"
    class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full">
    <div class="relative p-4 w-full max-w-2xl max-h-full">
      <!-- Modal content -->
      <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
        <!-- Modal头部内容 -->
        <form class="flex w-full border-b dark:border-b-gray-600">
          <label for="search" class="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white">Search</label>
          <!-- 搜索框 -->
          <div class="relative w-11/12 p-5">
            <div class="absolute left-6 inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
              <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true"
                xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                  d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z" />
              </svg>
            </div>
            
            <input type="search" id="search-input" ref="searchInputRef" v-model="searchWord" class="block w-full p-4 ps-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 hand-style" placeholder="请输入关键词搜索..." required> 
          </div>
          <div class="flex items-center justify-center">
            <button type="button" @click="searchModal.hide()"
              class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-10 h-10 flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white hand-style">
              <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
                  viewBox="0 0 14 14">
                  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
              </svg>
              <span class="sr-only">关闭按钮</span>
          </button> 
          </div>
        </form>
        <!-- Modal body -->
        <div v-loading="searchLoading">
          <div v-if="searchArticles && searchArticles.length > 0" class="p-4 md:p-5 space-y-4">
              <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
                共搜索到 {{ total }} 篇相关文章
              </p>
              <ol class="mt-3 divide-y divider-gray-200 dark:divide-gray-600">
                <li v-for="(article, index) in searchArticles" :key="index">
                  <a @click="jumpToArticleDetailPage(article.id)" class="items-center block p-3 sm:flex hover:bg-gray-100 hover:rounded-lg dark:hover:bg-gray-600 hand-style">
                    <img v-if="article.cover" class="w-24 h-12 mb-3 mr-3 rounded-lg sm:mb-0" :src="article.cover">
                    <img v-else class="w-24 h-12 mb-3 mr-3 rounded-lg sm:mb-0" src="@/assets/noPicture.png">
                    <div class="text-gray-600 dark:text-gray-400">
                      <h2 class="text-base font-normal text-gray-900 dark:text-white" v-html="article.title"></h2>
                      <span
                        class="inline-flex items-center text-xs font-normal text-gray-500 dark:text-gray-400">
                        <svg
                          class="inline w-2.5 h-2.5 mr-2 text-gray-400 dark:text-white" aria-hidden="true"
                          xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
                          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M5 1v3m5-3v3m5-3v3M1 7h18M5 11h10M2 3h16a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1Z">
                          </path>
                        </svg> {{ article.createDate }}
                      </span>
                    </div>
                  </a>
                </li>
              </ol>
              <!-- 分页 -->
              <div class="flex mt-7">
                <a v-if="current > 1" @click="prePage" 
                  class="flex items-center justify-center px-3 h-8 me-3 text-xs font-medium text-gray-500 bg-white border border-gray-300 rounded-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white hand-style">
                  <svg class="w-3 h-3 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 5H1m0 0 4 4M1 5l4-4"/>
                  </svg>
                </a>

                <a v-if="current < pages" @click="nextPage" class="flex ml-auto items-center justify-center px-3 h-8 text-xs font-medium text-gray-500 bg-white border border-gray-300 rounded-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white hand-style">
                  <svg class="w-3 h-3 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
                  </svg>
                </a>
              </div>
          </div>
          <!-- 未搜索到结果提示 -->
          <div v-else class="flex items-center justify-center flex-col mb-10">
              <ym-empty message="未查询到结果, 换个姿势搜索吧~" />
          </div>
        </div>

        <!-- Modal footer -->
        <div class="p-4 md:p-5 border-t text-xs flex items-center text-gray-400 dark:border-t-gray-600">
            <!-- Esc 退出提示 -->
            <span class="px-2 py-[1px] flex-none border rounded dark:border-gray-500">Esc</span>
            <span class="text-gray-400 ml-2">关闭</span>

            <!-- 底层技术介绍 -->
            <span class="ml-auto">基于 <a href="https://lucene.apache.org/" target="_blank" class="underline hand-style">Apache Lucene</a> 全文检索引擎开发</span>
        </div>
      </div>
    </div>
  </div>

  <!-- 知识库目录 drawer component -->
  <div id="wiki-catalog-drawer" class=" -translate-x-[100%] lg:hidden top-[4rem] fixed left-0 z-20 h-screen p-4 overflow-y-auto transition-transform bg-white w-80 dark:bg-gray-800" tabindex="-1" aria-labelledby="drawer-label">
      <!-- 知识库目录 -->
      <div class="grow transition-all duration-300">
          <div id="drawer-accordion-flush" data-accordion="collapse"
              data-active-classes="bg-white dark:bg-[#0d1117] dark:text-gray-300" data-inactive-classes=""
              class="last:pb-[170px]">
              <div v-for="(catalog, index) in props.catalogs" :key="index">
                  <h2 :id="'drawer-accordion-flush-heading-' + catalog.id">
                      <button type="button" class="hover:bg-gray-100 flex items-center justify-between w-full py-3 px-3 rounded-lg 
                          font-medium rtl:text-right text-gray-600 dark:text-gray-400 gap-3 dark:hover:bg-gray-800 dark:bg-[#212936]"
                          :data-accordion-target="'#drawer-accordion-flush-body-' + catalog.id"
                          :aria-expanded="[catalog.children.some(item => item.articleId == route.query.articleId) ? true : false]"
                          :aria-controls="'drawer-accordion-flush-body-' + catalog.id">
                          <!-- 一级目录标题 -->
                          <span class="flex items-center" v-html="catalog.title"></span>
                          <!-- 箭头 -->
                          <svg data-accordion-icon class="w-3 h-3 rotate-90 transition-all shrink-0" aria-hidden="true"
                              xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
                              <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M9 5 5 1 1 5" />
                          </svg>
                      </button>
                  </h2>
                  <!-- 二级目录 -->
                  <ul :id="'drawer-accordion-flush-body-' + catalog.id" class="hidden"
                      :aria-labelledby="'drawer-accordion-flush-heading-' + catalog.id">
                      <!-- 二级目录标题 -->
                      <li v-for="(childCatalog, index2) in catalog.children" :key="index2" class="flex items-center ps-10 py-2 pe-3 rounded-lg cursor-pointer 
                                  dark:text-gray-400"
                          :class="[childCatalog.articleId == route.query.articleId ? 'bg-sky-50 text-sky-600 dark:bg-sky-950 dark:text-sky-500' : 'hover:bg-gray-100 dark:hover:bg-gray-800']"
                          @click="goWikiArticleDetailPage(childCatalog.articleId)" v-html="childCatalog.title">
                      </li>
                  </ul>
              </div>
          </div>
      </div>
  </div>

  <!-- 个人资料 -->
  <FormDialog ref="formDialogRef" title="个人资料" destroyOnClose @submit="onSubmit">
    <el-form :model="form" ref="formRef" :rules="rules">
      <el-form-item label="账号" label-width="80px">
        <el-input size="large" v-model="form.username" placeholder="请输入账号" style="width: 240px;" clearable
          disabled></el-input>
      </el-form-item>
      <el-form-item label="昵称" prop="nickname" label-width="80px">
        <el-input size="large" v-model="form.nickname" placeholder="请输入昵称" style="width: 240px;" clearable></el-input>
      </el-form-item>
      <el-form-item label="头像" prop="avatar" label-width="80px">
        <el-upload class="avatar-uploader" action="#" :on-change="handleAvatarChange" :auto-upload="false"
          :show-file-list="false">
          <img v-if="form.avatar" :src="form.avatar" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon">
            <Plus />
          </el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item label="最后登录时间:" class="ml-10">
        <p>{{ userStore.userInfo.lastLoginTime }}</p>
      </el-form-item>
    </el-form>
  </FormDialog>
</template>
<script setup>
import { onMounted, onBeforeUnmount, ref, reactive, watch } from 'vue'
import { initCollapses, initDropdowns, initModals, initAccordions, Modal, Drawer } from 'flowbite'
import { useUserStore } from '@/stores/user'
import { useBlogSettingsStore } from '@/stores/blogsettings';
import { useRouter, useRoute } from 'vue-router'
import { showMessage } from '@/composables/util'
import { getArticleSearchPageList } from '@/api/frontend/search'
import { uploadFileFrontend } from '@/api/frontend/file'
import { updateUserInfo } from '@/api/frontend/other'
import ChangeTheme from '@/components/ChangeTheme.vue'
import FormDialog from '@/components/FormDialog.vue'

const router = useRouter()

const route = useRoute()
// 当前路由地址
const currentPath = ref(route.path)

const blogSettingsStore = useBlogSettingsStore()

// 初始化 flowbit 相关组件
onMounted(() => {
  initDropdowns();
  initCollapses();
  initModals();
  headerScroll();
  initAccordions();

  // 初始化搜索弹框
  const $modalElement = document.querySelector('#search-modal');
  searchModal.value = new Modal($modalElement, modalOptions, instanceOptions);

  // 初始化知识库目录 Drawer
  const $drawerElement = document.getElementById('wiki-catalog-drawer');
  wikiDrawer.value = new Drawer($drawerElement, drawerOptions, instanceOptionsDrawer);

  // 注册键盘事件监听器
  window.addEventListener('keydown', handleKeyDown);
})

onBeforeUnmount(() => {
  // 在组件销毁前移除事件监听器，防止内存泄漏
  window.removeEventListener('keydown', handleKeyDown);
})

// 搜索输入框引用
const searchInputRef = ref(null)
// 键盘监听
const handleKeyDown = (event) => {
    // 检查是否按下了 Ctrl 键和 K 键
    if (event.ctrlKey && event.key === 'k') {
        // 阻止激活浏览器本身的搜索框
        event.preventDefault()
        console.log('ctrl k 被按了')

        searchModal.value.show()

        // 激活搜索框
        searchInputRef.value.focus()
    }
}

// 前台判断用户是否登录 从pinia中获取
const userStore = useUserStore()

// 获取该对象的所有属性名称放到数组中
const keys = Object.keys(userStore.userInfo)
// 如果数组长度大于1证明用户已登录
const isLogined = ref(keys.length > 0)

// 确定退出登录
const logout = () => {
    userStore.logout()
    // 标记为未登录
    isLogined.value = false
    showMessage('退出登录成功')
}

// 初始化header 样式
const headerClass = ref('')

// 添加滚动监听
const headerScroll = (() => window.addEventListener('scroll', handleScroll))

// 移除滚动监听
onBeforeUnmount(() => window.removeEventListener('scroll', handleScroll))

// 滚动触发事件
const handleScroll = () => {
  if (window.scrollY > 100) {
    headerClass.value = "slideUp"
  } else {
    headerClass.value = "slideDown"
  }
}

// console.log(window.scrollY);

// 初始化 flowbit 相关组件
const searchModal = ref(null)

const modalOptions = {
    placement: 'top-center', // 弹框位置
    backdrop: 'dynamic',
    backdropClasses:
        'bg-gray-900/50 dark:bg-gray-900/80 fixed inset-0 z-40',
    closable: true,
    // 弹框隐藏触发
    onHide: () => {
        console.log('modal is hidden');
        // 关闭搜索弹框时，需要将搜索的内容置空
        searchWord.value = ''
    },
    // 弹框显示触发
    onShow: () => {
        console.log('modal is shown');
    },
    onToggle: () => {
        console.log('modal has been toggled');
    },
};

// instance options object
const instanceOptions = {
  id: 'searchModalEl',
  override: true
};


// 点击搜索框
const clickSearchBtn = () => {
	// 显示搜索弹框
  searchModal.value.show()
  // 激活搜索框
  searchInputRef.value.focus()
}


// 文章搜索结果
const searchArticles = ref([])
// 当前页码，给了一个默认值 1
const current = ref(1)
// 总数据量，给了个默认值 0
const total = ref(0)
// 每页显示的数据量，给了个默认值 5
const size = ref(2)
// 总共多少页
const pages = ref(0)
// 搜索关键词
const searchWord = ref('')

// 侦听属性，监听 searchWord 变量变化
watch(searchWord, (newText, oldText) => {
    console.log(`新值: ${newText}, 老值: ${oldText}`)
    if (newText && newText !== oldText) { // 若搜索关键词不为空，且和之前的值不相同
        renderSearchArticles({ current: current.value, size: size.value, word: newText })
    } else if (newText == '') { // 搜索词为空
        // 置空
        searchArticles.value = []
    }
})

const searchLoading = ref(false)

// 请求后台检索接口
function renderSearchArticles(data) {
    searchLoading.value = true
    getArticleSearchPageList(data).then(res => {
        console.log(res)
        if (res.success) {
            searchArticles.value = res.data
            current.value = res.current
            size.value = res.size
            total.value = res.total
            pages.value = res.pages
        }
    }).finally(() => {
        searchLoading.value = false
    })
}

// 渲染下一页搜索结果
const nextPage = () => {
    renderSearchArticles({ current: current.value + 1, size: size.value, word: searchWord.value })
}

// 渲染上一页搜索结果
const prePage = () => {
    renderSearchArticles({ current: current.value - 1, size: size.value, word: searchWord.value })
}

// 点击搜索结果，跳转文章详情页
const jumpToArticleDetailPage = (articleId) => {
    // 隐藏搜索对话框
    searchModal.value.hide()
    // 路由跳转
    router.push('/article/' + articleId)
}




// 对外暴露属性，将知识库目录数据传进来
const props = defineProps({
    catalogs: {
        type: Array,
        default: []
    }
})

// 知识库目录 Drawer 引用
const wikiDrawer = ref(null)

// options with default values
const drawerOptions = {
    placement: 'left',
    backdrop: true,
    bodyScrolling: false,
    edge: false,
    edgeOffset: '',
    backdropClasses:
    'bg-gray-900/50 dark:bg-gray-900/80 fixed inset-0 block lg:hidden',
    onHide: () => {
        console.log('drawer is hidden');
        isDrawerExpand.value = false
    },
    onShow: () => {
        console.log('drawer is shown');
    },
    onToggle: () => {
        console.log('drawer has been toggled');
    },
};

// instance options object
const instanceOptionsDrawer = {
  id: 'wiki-catalog-drawer',
  override: true
};

// 知识库目录抽屉是否展开，默认未展开
const isDrawerExpand = ref(false)

// 侦听 isDrawerExpand 变量
watch(isDrawerExpand, (newText, oldText) => {
    if (newText) {
        // 展示抽屉
        wikiDrawer.value.show()
    } else {
        // 隐藏抽屉
        wikiDrawer.value.hide()
    }
})

// 跳转文章详情页
const goWikiArticleDetailPage = (articleId) => {
    isDrawerExpand.value = false
    router.push({path: '/wiki/' + route.params.wikiId, query: {articleId}})
}

// ======= 个人资料 ========

const formDialogRef = ref(null)

const form = reactive({
  username: userStore.userInfo.username || '',
  nickname: userStore.userInfo.nickname || '',
  avatar: userStore.userInfo.avatar || '',
})

//表单引用
const formRef = ref(null)

// 规则校验
const rules = {
  // username: [
  //   {
  //     required: true,
  //     message: '用户名不能为空',
  //     trigger: 'blur'
  //   }
  // ],
  nickname: [
    {
      required: true,
      message: '昵称不能为空',
      trigger: 'blur',
    },
  ],
  avatar: [
    {
      required: true,
      message: '头像不能为空',
      trigger: 'blur',
    },
  ]
}

// 更换头像上传
const handleAvatarChange = async (file) => {
  // 构建表单对象
  const formData = new FormData()
  // 添加file字段，并将文件传入表单对象
  formData.append('file', file.raw)
  const res = await uploadFileFrontend(formData)
  if (res.success) {
    // 将返回的avatar头像链接设置到表单上，并提示成功
    form.avatar = res.data.url
    showMessage('上传成功')
  } else {
    showMessage(res.message, 'error')
    return
  }
}

const btnLoading = ref(false)

// 提交修改个人资料
const onSubmit = async () => {
  // 先验证form表单字段
  await formRef.value.validate()
  // 显示保存按钮 loading
  btnLoading.value = true
  const res = await updateUserInfo(form)
  if (res.success == true) {
    // 重新获取用户的信息
    showMessage('保存成功')
    userStore.setUserInfo()
  } else {
    showMessage(res.message, 'error')
  }
  btnLoading.value = false
  formDialogRef.value.close()
}

</script>
<style scoped>  
header {  
  box-shadow: 0 1px 40px -8px rgba(0, 0, 0, .5);
  background-color: hsla(0, 0%, 100%, .65);
}
@media (min-width: 768px) {
  .slideDown {
      transition: transform .4s ease-out;
      transform: translateY(0);
  }
  .slideUp {
      transition: transform .5s ease-out;
      transform: translateY(-100px);
  }
}
.avatar-uploader .avatar {
  width: 100px;
  height: 100px;
  display: block;
}

#checkbox {
  display: none;
}

.toggle {
  position: relative;
  width: 22px;
  height: 22px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition-duration: .5s;
}

.bars {
  width: 100%;
  height: 2.5px;
  background-color: rgb(110, 193, 236);
  border-radius: 2.5px;
}

#bar2 {
  transition-duration: .8s;
}

#bar1,#bar3 {
  width: 70%;
}

#checkbox:checked + .toggle .bars {
  position: absolute;
  transition-duration: .5s;
}

#checkbox:checked + .toggle #bar2 {
  transform: scaleX(0);
  transition-duration: .5s;
}

#checkbox:checked + .toggle #bar1 {
  width: 100%;
  transform: rotate(45deg);
  transition-duration: .5s;
}

#checkbox:checked + .toggle #bar3 {
  width: 100%;
  transform: rotate(-45deg);
  transition-duration: .5s;
}

#checkbox:checked + .toggle {
  transition-duration: .5s;
  transform: rotate(180deg);
}

</style>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  text-align: center;
}
</style>